<!-- 报警联系人组 -->
<template>
	<div>
		<div class="main_operation">
			<div class="operation_left">
				<a-button class="mr10" type="primary" @click="addBtn">添加</a-button>
				<a-button class="mr10" type="danger">批量删除</a-button>
			</div>
			<div class="operation_right">
				<a-input-search style="width:300px;" placeholder="请输入姓名，手机号或邮箱" enterButton="查询" />
				<!-- @search="onSearch" -->
			</div>
		</div>
		<div class="main">
			<a-table
				:rowSelection="{ fixed: true, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
				:columns="columns"
				:dataSource="listdata"
				:rowKey="record => record.id"
				:scroll="{ x: 1000, y: 500 }"
			>
				<!-- x: '120%', -->
				<div slot="operation" slot-scope="text, record">
					<a-button size="small" class="mr10" type="primary" @click="editBtn(record)">编辑</a-button>
					<a-button size="small" type="danger">删除</a-button>
				</div>
			</a-table>
		</div>
		<a-modal :title="modelTitle" v-model="addModel" @ok="handleOk">
			<p>姓名</p>
			<p>手机</p>
			<p>邮箱</p>
			<p>微信</p>
			<p>单位名称</p>
		</a-modal>
	</div>
</template>

<script>
export default {
	name: 'Briefing',
	data() {
		return {
			columns: [],
			listdata: [],
			selectedRowKeys: [],

			addModel: false,
			modelTitle:'',
		};
	},
	mounted() {
		this.getList();
	},
	methods: {
		onSelectChange(selectedRowKeys) {
			console.log('selectedRowKeys changed: ', selectedRowKeys);
			this.selectedRowKeys = selectedRowKeys;
		},
		addBtn(){
			this.modelTitle = '添加'
			this.addModel = true
		},
		editBtn(item){
			this.modelTitle = '编辑'
			this.addModel = true
		},
		handleOk(){
			console.log("确定");
		},
		getList() {
			this.columns = [
				{
					title: '姓名',
					// fixed: 'left',
					dataIndex: 'a',
					key: 'a',
					align: 'center',
					scopedSlots: { customRender: 'a' },
					width: '15%'
				},
				{
					title: '手机',
					// fixed: 'left',
					dataIndex: 'b',
					key: 'b',
					align: 'center',
					width: '15%'
				},
				{
					title: '邮箱',
					dataIndex: 'c',
					key: 'c',
					align: 'center',
					width: '15%'
				},
				{
					title: '微信',
					dataIndex: 'd',
					key: 'd',
					align: 'center',
					width: '15%'
				},
				{
					title: '单位名称',
					dataIndex: 'e',
					key: 'e',
					align: 'center'
					// scopedSlots: { customRender: 'state' },
					// width: 250
				},
				{
					title: '操作',
					dataIndex: 'operation',
					key: 'operation',
					scopedSlots: { customRender: 'operation' },
					align: 'center',
					fixed: 'right',
					width: 200
				}
			];
			for (let i = 1; i <= 100; i++) {
				this.listdata.push({
					id: i,
					a: '姓名' + i,
					b: 12345678912 + i,
					c: i + '@qq.com',
					d: '微信' + i,
					e: `单位名称`
				});
			}
		}
	}
};
</script>

<style></style>
